<template>
    <div class="post-item">
        <van-cell :title="postData.content" />
        <img :src="postData.image" alt="" class="png">
        <div class="btnline btn-group">
            <a href="javascript:;" class="btn">
                <van-icon name="share-o" />{{ postData.stats.share }}
            </a>
            <a href="javascript:;" class="btn">
                <van-icon name="chat-o" />{{ postData.stats.comment }}
            </a>
            <a href="javascript:;" class="btn">
                <van-icon name="good-job-o" />{{ postData.stats.like }}
            </a>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'

const props = defineProps({
    postData: {
        type: Object,
        required: true,
        default: () => ({
            content: '',
            image: 'https://picsum.photos/200',
            stats: {
                share: 0,
                comment: 0,
                like: 0
            }
        })
    }
})

const emit = defineEmits(['follow'])

const isFollowing = ref(false)
const toggleFollow = () => {
    isFollowing.value = !isFollowing.value
    emit('follow', isFollowing.value)
}
</script>

<style scoped>
/* 保持原有样式不变 */
.head {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 10px;
}

.png {
    width: 100vw;
    height: 140px;
}

.btnline.btn-group {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    border-bottom: 1px solid #ccc;
}

.btnline.btn-group .btn {
    width: 33%;
    flex-grow: 1;
    text-align: center;
    line-height: 40px;
}

.btnline.btn-group .btn i {
    display: inline-block;
    margin-right: 10px;
}
</style>